<template>
    <div class="box1">
      <div class="jujs">
          <a class="shark" @click="isColl" ref="late"><el-icon :size="30"><expand /></el-icon></a>
      </div>
      
      <el-breadcrumb :separator-icon="ArrowRight" class="manles">
        <el-breadcrumb-item :to="{ path: '/Home/Mainpage' }">首页</el-breadcrumb-item>
        <template v-if="$route.path != '/Home/Mainpage'">
          <el-breadcrumb-item
            v-for="item in $route.matched.slice(1)" :key="item.path">
            {{ item.meta.title }}
          </el-breadcrumb-item>
        </template>
      </el-breadcrumb>

    </div>
</template>
<script>
import {Expand} from "@element-plus/icons-vue";
import mest from "@/router/page";
export default {
    components: {
    Expand,
    mest
  },
  data() {
      return {
        isCollapse:true
      }
  },
  methods: {
      isColl() { 
      this.isCollapse = !this.isCollapse;
      this.$emit("goods",this.isCollapse)
      this.$refs.late.style.transform = !this.isCollapse? "rotateY(180deg)" : "rotateY(0deg)";  
    },
  },
};
</script>
<style lang="less" scoped>
    .box1 {
      width: 80%;
      height: 40px;
      margin-top: 9px;
      padding-left: 18px;
        .shark {
      width: 30px;
      transition: 0.5s;
      display: inline-block;
      margin-right: 15px;
      vertical-align: middle;
    }
    .jujs{
        height: 100%;width: 45px;float: left;
    }
    .el-breadcrumb {
       float: left;
       line-height: 27px;
       width: 750px;
    }
      
    .uss{
      float: left;
      height: 40px;    
      width: 60px;
      background-color: aqua;
      
      .nius{
        display: inline-block;
        height: 30px;
        width: 100%;
      }
    }
    .iconfont{
      height: 30px;
      line-height: 30px;
      font-size: 26px;
      vertical-align: middle;
    }
        .arr{
      float: left;
      height: 40px;    
      width: 60px;
      background-color: aqua;
      
      .nius{
        display: inline-block;
        height: 30px;
        width: 100%;
      }
    }
}
</style>
